<script setup lang='ts'>

interface TabItem extends IBaseTabItem {
  disable: boolean
}

interface Props {
  modelValue: string
  list: TabItem[]
}

defineOptions({ name: 'AppSportsBetSlipTypeTab' })
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])

const wrapRef = ref()
const { width: wrapWidth } = useElementSize(wrapRef)

const itemWidth = computed(() => wrapWidth.value / props.list.length)
const activeTranslateX = computed(() => {
  const activeIndex = props.list.findIndex((a) => a.value === props.modelValue)
  return activeIndex > -1 ? activeIndex * itemWidth.value : 0
})

function clickHandler(item: TabItem) {
  if (item.value === void 0 || item.value === props.modelValue || item.disable)
    return

  emit('update:modelValue', item.value)
}
</script>

<template>
  <div class="tab-wrap" ref="wrapRef">
    <div class="w-full flex">
      <div v-for="item in list" :key="item.value" class="tab" @click="clickHandler(item)"
        :style="{ maxWidth: `${100 / list.length}%` }" :class="{
          active: item.value === modelValue,
          disabled: item.disable
        }">
        {{ item.label }}
      </div>
    </div>
    <div class="line" :style="{
      maxWidth: `${100 / list.length}%`,
      width: `${100 / list.length}%`,
      transform: `translateX(${activeTranslateX}px)`
    }" />
  </div>
</template>

<style lang='scss' scoped>
.tab-wrap {
  width: 100%;
  background: var(--color-bg-black-3);
}

.tab {
  flex: 1;
  cursor: pointer;
  margin: 0;
  font-size: 12px;
  text-align: center;
  transition: color 0.5s;
  line-height: 16px;
  padding-top: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.20);
  padding-bottom: 12px;

  &.active {
    color: #fff;
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: none;
  }
}

.line {
  height: 2px;
  background: #24ee89;
  transition: .3s ease-in-out;
  transition-property: transform, width;
}
</style>
